﻿<template>
    <view class="coreshop-margin-left-10 coreshop-margin-right-10 coreshop-margin-bottom-10  coreshop-margin-top-10">
        <u-grid :border="false" align="left" :col="coreshopData.parameters.style" v-if="coreshopData.parameters.style == '2' ||coreshopData.parameters.style == '3' ||coreshopData.parameters.style == '4'">
            <u-grid-item bg-color="transparent" v-for="(item, index) in coreshopData.parameters.list" :key="index" :custom-style="{padding:coreshopData.parameters.margin+'px'}">
                <image :src="item.image" mode="widthFix" @click="showSliderInfo(item.linkType, item.linkValue)" style="width: 100%;"></image>
            </u-grid-item>
        </u-grid>
        <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between mainWindow" v-if="coreshopData.parameters.style == '0'">
            <view class="left"  :style="{paddingRight:coreshopData.parameters.margin+'px'}">
                <u--image :src="coreshopData.parameters.list[0].image" height="200px" width="100%" v-if="coreshopData.parameters.list[0]" @click="showSliderInfo(coreshopData.parameters.list[0].linkType, coreshopData.parameters.list[0].linkValue)"></u--image>
            </view>
            <view class="right" :style="{paddingLeft:coreshopData.parameters.margin+'px'}">
                <view>
                    <u--image :src="coreshopData.parameters.list[1].image" height="120px" width="100%" v-if="coreshopData.parameters.list[1]" @click="showSliderInfo(coreshopData.parameters.list[1].linkType, coreshopData.parameters.list[1].linkValue)"></u--image>
                </view>
                <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between" :style="{marginTop:coreshopData.parameters.margin +'px'}">
                    <view :style="{paddingRight:coreshopData.parameters.margin / 2+'px'}" class="minBox">
                        <u--image :src="coreshopData.parameters.list[2].image" :height="(200-120-coreshopData.parameters.margin)+'px'" width="100%" v-if="coreshopData.parameters.list[2]" @click="showSliderInfo(coreshopData.parameters.list[2].linkType, coreshopData.parameters.list[2].linkValue)"></u--image>
                    </view>
                    <view :style="{paddingLeft:coreshopData.parameters.margin / 2+'px'}" class="minBox">
                        <u--image :src="coreshopData.parameters.list[3].image" :height="(200-120-coreshopData.parameters.margin)+'px'" width="100%" v-if="coreshopData.parameters.list[3]" @click="showSliderInfo(coreshopData.parameters.list[3].linkType, coreshopData.parameters.list[3].linkValue)"></u--image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "coreshopImgWindow",
        props: {
            coreshopData: {
                // type: Object,
                required: true,
            }
        },
        data() {
            return {
                height: 0
            }
        },
        onLoad() {
        },
        methods: {
        }
    }
</script>
<style lang="scss" scoped>
    .mainWindow { width: 100%; height: 200px;
        .left { width: 50%; height: 200px; }
        .right { width: 50%; height: 200px; }
        .minBox { width: 50%; }
    }
    </style>
